<script lang="ts">
    import { useClassList } from "../utils/useClassList";
    import type { TimelineItemProps } from "./Timeline";

    const props: TimelineItemProps = $props();

    const color = props.color ?? "blue";

    const classList = $derived(
        useClassList(props, "cm-timeline-item-head", {
            [`cm-timeline-item-head-${color}`]: color,
            "cm-timeline-item-head-custom": props.icon,
            "cm-timeline-item-head-fill": props.fill,
        }),
    );
</script>

<div class="cm-timeline-item">
    <div class="cm-timeline-item-tail"></div>
    <div class={classList}>
        {@render props.icon?.()}
    </div>
    <div class="cm-timeline-item-content">
        {@render props.children?.()}
        {#if props.time}
            <div class="cm-timeline-time">
                {props.time}
            </div>
        {/if}
    </div>
</div>
